<docs>
---
order: 6.1
version: 3.0
title: 树型筛选菜单
---

## zh-CN

可以使用 `filterMode` 来修改筛选菜单的 UI，可选值有 `menu`（默认）和 `tree`。

> `filterSearch` 用于开启筛选项的搜索。

</docs>

<template>
    <j-table
        :columns="columns"
        :data-source="data"
        @change="onChange"
    ></j-table>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import type { TableProps } from 'ant-design-vue';

export default defineComponent({
    setup() {
        const columns: TableProps['columns'] = [
            {
                title: 'Name',
                dataIndex: 'name',
                filters: [
                    {
                        text: 'Joe',
                        value: 'Joe',
                    },
                    {
                        text: 'Category 1',
                        value: 'Category 1',
                        children: [
                            {
                                text: 'Yellow',
                                value: 'Yellow',
                            },
                            {
                                text: 'Pink',
                                value: 'Pink',
                            },
                        ],
                    },
                    {
                        text: 'Category 2',
                        value: 'Category 2',
                        children: [
                            {
                                text: 'Green',
                                value: 'Green',
                            },
                            {
                                text: 'Black',
                                value: 'Black',
                            },
                        ],
                    },
                ],
                filterMode: 'tree',
                filterSearch: true,
                onFilter: (value, record) => record.name.includes(value),
                width: '30%',
            },
            {
                title: 'Age',
                dataIndex: 'age',
                sorter: (a, b) => a.age - b.age,
            },
            {
                title: 'Address',
                dataIndex: 'address',
                filters: [
                    {
                        text: 'London',
                        value: 'London',
                    },
                    {
                        text: 'New York',
                        value: 'New York',
                    },
                ],
                onFilter: (value, record) => record.address.startsWith(value),
                filterSearch: true,
                width: '40%',
            },
        ];

        const data = [
            {
                key: '1',
                name: 'John Brown',
                age: 32,
                address: 'New York No. 1 Lake Park',
            },
            {
                key: '2',
                name: 'Jim Green',
                age: 42,
                address: 'London No. 1 Lake Park',
            },
            {
                key: '3',
                name: 'Joe Black',
                age: 32,
                address: 'Sidney No. 1 Lake Park',
            },
            {
                key: '4',
                name: 'Jim Red',
                age: 32,
                address: 'London No. 2 Lake Park',
            },
        ];

        function onChange(pagination, filters, sorter, extra) {
            console.log('params', pagination, filters, sorter, extra);
        }

        return {
            data,
            columns,
            onChange,
        };
    },
});
</script>
